<template>
  <ReportPage>
    <q-table
    class="my-table"
    wrap-cells
      flat
      bordered
      :title="header"
      :columns="columns"
      :rows="rows"
      :filter="filter"
      :pagination="{ rowsPerPage: 50 }"
      row-key="id"
      no-data-label="No stock item found."
      no-results-label="The filter didn't uncover any results"
    >
      <template v-slot:top-right>
        <q-card-actions>
          <q-input
            filled
            class="q-pa-md"
            borderless
            dense
            debounce="300"
            v-model="filter"
            placeholder="Search"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>

          <q-btn
            color="primary"
            icon-right="archive"
            label="Export to csv"
            no-caps
            @click="exportTable(columns, rows, header)"
          />
        </q-card-actions>
      </template>

      <template v-slot:body-cell="props">
        <q-td
          :props="props"
          :class="props.row.id % 2 == 0 ? 'bg-grey-2 ' : 'bg-grey-4'"
          @click="$router.push(`maintenance/order/${props.row.id}`)"
        >
          {{ props.value }}
        </q-td>
      </template>

      <template v-slot:no-data="{ icon, message }">
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <!-- <q-icon size="2em" name="sentiment_dissatisfied" /> -->
          <q-icon size="2em" :name=icon />
          <span> {{ message }} </span>
        </div>
      </template>
    </q-table>
  </ReportPage>
</template>

<script setup lang="ts">
import ReportPage from 'src/pages/ReportPage.vue';
import { StockList } from 'src/services/type';
import { ref } from 'vue';
import { QTableColumn } from 'quasar';
import { exportTable } from 'src/utils/exportCsvUtils';

const header = ref('Stock List');
const filter = ref('');

const columns: QTableColumn[] = [
  {
    name: 'id',
    label: '#',
    field: 'id',
  },
  {
    name: 'system',
    align: 'center',
    label: 'System',
    field: 'system',
    sortable: true,
  },
  {
    name: 'serial_no',
    align: 'center',
    label: 'Serial No.',
    field: 'serial_no',
    sortable: true,
  },
  {
    name: 'stock_code',
    align: 'center',
    label: 'Stock Code',
    field: 'stock_code',
    sortable: true,
  },
  {
    name: 'work_group',
    align: 'center',
    label: 'Work Group',
    field: 'work_group',
  },
  {
    name: 'deliver_to',
    align: 'center',
    label: 'Deliver To',
    field: 'deliver_to',
  },
  {
    name: 'check_in',
    align: 'center',
    label: 'Check In Time',
    field: 'check_in',
    sortable: true,
  },
  {
    name: 'check_out',
    align: 'center',
    label: 'Check Out Time',
    field: 'check_out',
    sortable: true,
  },
];

const rows: StockList[] = [
  {
    id: 1,
    system: 'RS',
    serial_no: '1',
    stock_code: '1',
    work_group: '1',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 2,
    system: 'RS',
    serial_no: '2',
    stock_code: '2',
    work_group: '2',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 3,
    system: 'RS',
    serial_no: '3',
    stock_code: '3',
    work_group: '3',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 4,
    system: 'RS',
    serial_no: 'A2656165165',
    stock_code: 'A2656165165',
    work_group: 'A2656165165',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 3,
    system: 'RS',
    serial_no: '3',
    stock_code: '3',
    work_group: '3',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 4,
    system: 'RS',
    serial_no: 'A2656165165',
    stock_code: 'A2656165165',
    work_group: 'A2656165165',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 3,
    system: 'RS',
    serial_no: '3',
    stock_code: '3',
    work_group: '3',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 4,
    system: 'RS',
    serial_no: 'A2656165165',
    stock_code: 'A2656165165',
    work_group: 'A2656165165',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 3,
    system: 'RS',
    serial_no: '3',
    stock_code: '3',
    work_group: '3',
    sw_ver: '1',
    description: '1',
  },
  {
    id: 4,
    system: 'RS',
    serial_no: 'A2656165165',
    stock_code: 'A2656165165',
    work_group: 'A2656165165',
    sw_ver: '1',
    description: '1',
  },
];
</script>
